<template>
    <div id="dplayer" class="video-box"></div>
</template>

<script>
    import Hls from "hls.js";
    import DPlayer from 'dplayer'
    export default {
        name: 'dplayer',
        props: {
            dplayerData: Object,
        },
        data() {
            return {}
        },
        mounted() {
            // https://b-hls-02.doppiocdn.com/hls/50217236/50217236.m3u8
            // https://b-hls-05.doppiocdn.com/hls/74035062/74035062.m3u8
            // https://b-hls-19.doppiocdn.com/hls/20286025/20286025.m3u8
            this.dp = new DPlayer({
                container: document.getElementById('dplayer'),
                theme: '#b7daff', // 风格颜色，例如播放条，音量条的颜色
                // loop: false, // 是否自动循环
                lang: 'zh-cn', // 语言，'en', 'zh-cn', 'zh-tw'
                hotkey: true, // 是否支持热键，调节音量，播放，暂停等
                preload: 'auto', // 自动预加载
                mutex: true,
                video: {
                    url: 'https://b-hls-19.doppiocdn.com/hls/20286025/20286025.m3u8', // 播放视频的路径
                    defaultQuality: 0, // 默认是HD
                    pic: '', // 视频封面图片
                    type: 'customHls',
                    customType: {
                        customHls: function(video, player) {
                            const hls = new Hls();
                            hls.loadSource(video.src);
                            hls.attachMedia(video);
                        },
                    }
                },
            })
        },
        created() {},
        methods: {
            // 切换视频源事件
            switchVideo(item) {
                this.dp.switchVideo({
                    url: item.video,
                    pic: item.imgUrl,
                })
            },
            // 暂停事件
            pause() {
                this.dp.pause()
            },
        },
    }
</script>

<style scoped>
    .video-box {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 80%;
    }
</style>
